<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<script type="text/javascript" charset="utf-8"
	src="js/libs/editor/ueditor.config.js"></script>
<script type="text/javascript" src="js/libs/editor/ueditor.js"></script>

<div class="header">
	<h2>
		事件分类扩展属性设置<span><font color="red">（* 为必填项）</font> </span>
	</h2>
</div>

<form:form commandName="model" cssClass="validate"
	id="categoryPropertySettingForm"
	action="incident/categoryPropertySetting/save">
	<form:hidden path="id" />
	<form:hidden path="categoryId" />
	<table class=" form-table">
		<tbody>
			<!-- <tr>
				<td class="td1">应用生成的HTML：</td>
				<td class="td2"><input type="radio" id="areUseChtml_1"
					name="areUseChtml" value="1"><label for="areUseChtml_1">是</label>
					<input type="radio" id="areUseChtml_2" name="areUseChtml" value="0"><label
					for="areUseChtml_2">否</label></td>
			</tr> -->
			<tr>
				<td class="td1">列：</td>
				<td class="td2"><form:input path="col" value="3" />
				</td>
			</tr>
			<tr>
				<td class="td1">生成表：</td>
				<td class="td2"><form:input path="dbName" value="" />&nbsp;&nbsp;<input
					type="button" onclick="createTable()" value="生成表" class="button">
				</td>
			</tr>
			<tr>
				<td class="td1">操作：</td>
				<td class="td2"><input type="button" onclick="reSetHtml()"
					value="重置HTML" class="button">
					<input type="button" onclick="formatCode()"
					value="格式化代码" class="button">
					<input type="button" onclick="reView()"
					value="生成预览" class="button">
				</td>
			</tr>
			<tr style="">
				<td class="td1">HTML：</td>
				<td class="td2"><form:textarea path="chtml" onchange="reView()"
						cssStyle="height:350px;width:90%" cssClass="editor required" />
				</td>
			</tr>
			<tr style="display:none">
				<td class="td1">编辑器：</td>
				<td class="td2"><div id="editChtml"
						style="height:200px;width:90%" class="editor required"></div></td>
			</tr>
			<tr>
				<td class="td2" colspan='2'><div id="testChtml"
						style="height:200px;width:90%" class="editor required"></div></td>
			</tr>

		</tbody>
	</table>
</form:form>
<script type="text/javascript">
   function formatCode()
   {
     var htmlStr=$("#chtml").val();
      $.ajax({
			url : 'incident/categoryPropertySetting/formatHtmlStr',
			type: 'POST',
			data : {
				htmlStr : htmlStr
			},
			success : function(data) {
				if(data)
				{
				  $("#chtml").val(data);
				  isperp.initElement("#incidentPropertyTable");
				}
			}

		});
   }

	function createTable() {
		var dbName = $("#dbName").val();
		var categoryId = $("#categoryId").val();
		$.ajax({
			url : 'incident/category/property/createDbTable',
			data : {
				dbName : dbName,
				categoryId : categoryId
			},
			success : function(data) {
				if (!data.success) {
					alert(data.msg);
				} else {
					alert("成功创建表");
				}
			}

		});

	}

	function reSetHtml() {
		var categoryId = '${model.categoryId}';
		//UE.getEditor('testChtml').setContent('', false);
		$.getJSON("incident/category/property/listByCategory?categoryId=" + categoryId, function(data) {
			var htmlStr = "<table id='incidentPropertyTable' class='form-table' style='table-layout: auto'>";
			var col = $("#col").val();
			var rStr = "";
			var tdIndex = 1;
			var tclassify = "";
			var row = "";
			$(data).each(function(index, item) {
				var tdInnerHtml = item.td_inner_html;
				var classify = item.classify;

				if (col == 2) {
					if (index == 0) {
						tclassify = classify;
						row = "<tr><td colspan='4'><div class='pheader' style='padding:0px;'><h3>" + classify + "</h3></div></td></tr>"
						htmlStr += row;
					} else {
						if (classify != tclassify) {
							htmlStr += rStr;
							rStr = "";
							tdIndex = 1;
							row = "<tr><td colspan='4'><div class='pheader'><h3>" + classify + "</h3></div></td></tr>"
							htmlStr += row;
							tclassify = classify;
						}
					}
					if (tdInnerHtml.indexOf('colspan') > -1 && rStr == "") {
						rStr = "<td class='td1' >" + item.name + "：</td><td class='td2' "+tdInnerHtml+">" + createControl(item) + "</td>";
						row = "<tr>" + rStr + "</tr>";
						htmlStr += row;
						tdIndex = 1;
						rStr = "";
					} else if (tdIndex == 1) {
						rStr += "<td class='td1' "+tdInnerHtml+">" + item.name + "：</td><td class='td2'>" + createControl(item) + "</td>";
						tdIndex++;
					} else if (tdIndex == 2) {
						rStr += "<td class='td1' "+tdInnerHtml+">" + item.name + "：</td><td class='td2'>" + createControl(item) + "</td>";
						row = "<tr>" + rStr + "</tr>";
						htmlStr += row;
						tdIndex = 1;
						rStr = "";
					}
				} else if (col == 3) {

					if (index == 0) {
						tclassify = classify;
						row = "<tr><td colspan='6'><div class='pheader' style='padding:0px;'><h3>" + classify + "</h3></div></td></tr>"
						htmlStr += row;
					} else {
						if (classify != tclassify) {
							htmlStr += rStr;
							rStr = "";
							tdIndex = 1;
							row = "<tr><td colspan='6'><div class='pheader'><h3>" + classify + "</h3></div></td></tr>"
							htmlStr += row;
							tclassify = classify;
						}
					}
					if ((tdInnerHtml.indexOf('colspan') > -1) && rStr == "") {
						rStr = "<td class='td1' >" + item.name + "：</td><td class='td2' "+tdInnerHtml+">" + createControl(item) + "</td>";
						row = "<tr>" + rStr + "</tr>";
						htmlStr += row;
						tdIndex = 1;
						rStr = "";
					} else if (tdIndex == 1) {
						rStr += "<td class='td1' "+tdInnerHtml+">" + item.name + "：</td><td class='td2'>" + createControl(item) + "</td>";
						tdIndex++;
					} else if (tdIndex == 2) {
						rStr += "<td class='td1' "+tdInnerHtml+">" + item.name + "：</td><td class='td2'>" + createControl(item) + "</td>";
						tdIndex++;
					} else if (tdIndex == 3) {
						rStr += "<td class='td1' "+tdInnerHtml+">" + item.name + "：</td><td class='td2'>" + createControl(item) + "</td>";
						row = "<tr>" + rStr + "</tr>";
						htmlStr += row;
						tdIndex = 1;
						rStr = "";
					}
				}
			});
			if (rStr != "") {
				row = "<tr>" + rStr + "</tr>";
				htmlStr += row;
			}
			if (data.length > 0)
				htmlStr += "<tr><td colspan='4'><input style='display:none' name='tid_incidentProperty' id='tid_incidentProperty'></td></tr>";
			htmlStr += "</table>";
			$("#chtml").val(htmlStr);
			$("#testChtml").html($("#chtml").val());
			createList();
			//UE.getEditor('testChtml').setContent(htmlStr, true);
			//UE.getEditor('chtml').destroy();
			//UE.getEditor('chtml');

		});

		
	}

	function createList() {
		$("[dataType='list']").each(function() {
			var objId = $(this).data("id");
			var targetId = 'div_list_' + objId;
			var objOption = $(this).data("option");
			if (objId) {
				var relationId = 'test';
				var option = {
					targetId : targetId,
					readOnly : false,
					relationId : relationId,
					tableName : '',
					columns : []
				};
				var tOption = eval('(' + objOption + ')');
				option.tableName = tOption.tableName;
				option.columns = tOption.columns;
				isperp.createEasyTable(option);
			}
		});
	}

	//构建自定义属性输入控件
	function createControl(item) {
		var controlStr = "";
		var cssCls = "";
		switch (item.data_type) {
		case "string":
			controlStr = createInputElement(item, cssCls);
			break;
		case "number":
			cssCls = "number";
			item.data_type = "text";
			controlStr = createInputElement(item, cssCls);
			break;
		case "list":
			controlStr = "<div id='div_list_"+item.id+"' dataType='list' data-id=\""+item.id+"\" data-option=\""+item.items+"\"></div>";
			break;
		case "date":
		case "datetime":
			controlStr = createInputElement(item, cssCls);
			break;
		case "textarea":
			controlStr = "<textarea name='c_" + item.id + "'  id='c_" + item.id + "' data-id='" + item.id + "' class='" + cssCls;

			if (item.notnull) {
				controlStr += " required";
			}
			controlStr += "'></textarea>";
			break;

		case "select":
			var itemDataSource = eval('(' + item.items + ')');
			controlStr = "<select name='c_" + item.id + "' id='c_" + item.id + "'   data-id='" + item.id + "' ";
			if (item.notnull) {
				controlStr += " class='required'>";
			} else {
				controlStr += " >";
			}
			controlStr += "<option value=''></option>";
			if (itemDataSource) {
				$(itemDataSource).each(function(i, it) {
					controlStr += "<option value='"+it.value+"'>" + it.name + "</option>";
				});
			}
			controlStr += "</select>";
			break;
		case "custom":
			controlStr += item.items;
			break;
		case "checkboxs":
			var itemDataSource = eval('(' + item.items + ')');
			controlStr += "<input  style='display:none' id='c_"+item.id+"' name='c_"+item.id+"' >";
			if (itemDataSource) {
				$(itemDataSource).each(function(i, it) {
					controlStr += "<span><input id='c_" + item.id + i + "' onclick=\"c_checkbox_click(this)\" name='" + item.id + "' type='checkbox' value='" + itemDataSource[i].value + "'><label for='c_"+item.id+i+"'>" + itemDataSource[i].name + "</label></span>";
				});
			}
			break;
		case "radios":
			var itemDataSource = eval('(' + item.items + ')');
			if (itemDataSource) {
				$(itemDataSource).each(function(i, it) {
					controlStr += "<span><input id='c_"+item.id+"_"+i+"' name='c_"+item.id+"' type='radio' value='"+itemDataSource[i].value+"'><label for='c_"+item.id+"_"+i+"'>" + itemDataSource[i].name + "</label></span>";
				});
			}
			break;

		}
		return controlStr;

	}
	//构建input元素
	function createInputElement(item, cssCls) {
		var type = item.data_type;
		if (type == "string")
			type = "text";
		var controlStr = "<input type='" + item.data_type + "' name='c_" + item.id + "' id='c_" + item.id + "' data-id='" + item.id + "' class='" + cssCls;
		if (item.notnull) {
			controlStr += " required";
		}
		controlStr += "' />"
		return controlStr;
	}
</script>
<script type="text/javascript">
	function beformSubmit() {
		//var thtml = UE.getEditor('testChtml').getContent();
		//$("#chtml").val(thtml);
	}
	$(function() {
		$("#testChtml").html($("#chtml").val());
		createList();
		//UE.getEditor('testChtml');

	});
	function reView() {
		$("#testChtml").html($("#chtml").val());
		createList();
		isperp.initElement("#incidentPropertyTable");
	}
</script>

<isperp:buttonList>
	<button class="submit nui-mainbtn"
		onclick="beformSubmit();isperp.submitForm();">保存</button>
</isperp:buttonList>


